<template>
  <div class="goods-item" @click="itemclick">
      <img v-lazy= "getimg" alt="" >
      <div class="goods-info">
          <p>{{goodsitem.title}}</p>
          <span class="price">{{goodsitem.price}}</span>
      </div>
  </div>
</template>

<script>
export default {
    name:'homegoodsItem',
    props: {
        goodsitem:{
            type:Object,
            default(){
                return []
            }
        }
    },
    computed: {
      getimg(){
          return this.goodsitem.image || this.goodsitem.show.img
      }  
    },
    methods: {
        itemclick(){
            this.$router.push('/details/' + this.goodsitem.iid)
        }
    }
}
</script>

<style scoped>
.goods-item {
		width: 49%;
		height: auto;
		padding-top: 6px;
		font-size: 14px;       
}
.goods-item img{
			width: 100%;
			height: auto;
			border-radius: 4px;
		}
.goods-info .price {
			display: flex;
			justify-content: space-between;
			margin: 6px 0;
            display: inline-block;
			width: 20px;
			height: 20px;
			background-size: cover;
			vertical-align: bottom;
            color: red;
		}
.goods-info p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>